<script setup>
import { ref, onMounted } from 'vue';

// 小部件原始数组
const partHeaders = [
    { name: '入住率', id: 1 },
    { name: '节点状态', id: 2 },
    { name: '磁盘', id: 3 },
    { name: '工作量', id: 4 }
];
// 备份原始数据
let backupHeaders = ref({ ...partHeaders });

// 插入图表
const chartData = ref();
const chartOptions = ref();
onMounted(() => {
    chartData.value = setChartData();
    chartOptions.value = setChartOptions();
});
const setChartData = () => {
    const documentStyle = getComputedStyle(document.body);

    return {
        labels: ['A', 'B', 'C'],
        datasets: [
            {
                data: [540, 325, 702],
                backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')],
                hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')]
            }
        ]
    };
};
const setChartOptions = () => {
    const documentStyle = getComputedStyle(document.documentElement);
    const textColor = documentStyle.getPropertyValue('--text-color');

    return {
        plugins: {
            legend: {
                labels: {
                    usePointStyle: true,
                    color: textColor
                }
            }
        }
    };
};

// 图表类型弹框
const chartTypeVisible = ref(false);
const fullScreenVisible = ref(false);
const confirmClick = () => {
    console.log(selectedType.value);
    chartType.value = selectedType.value.name;
    chartTypeVisible.value = false;
};
// 图表类型
const chartType = ref('line');
const handelSetChartType = (index) => {
    console.log(index);
    chartTypeVisible.value = true;
};
// 选择列表
const selectedType = ref();
const types = ref([
    { name: 'pie', code: 'pie' },
    { name: 'bar', code: 'bar' },
    { name: 'line', code: 'line' },
    { name: 'doughnut', code: 'doughnut' },
    { name: 'polarArea', code: 'polarArea' },
    { name: 'radar', code: 'radar' }
]);
// 删除小部件
import { useConfirm } from 'primevue/useconfirm';
import { useToast } from 'primevue/usetoast';
const confirm = useConfirm();
const toast = useToast();
const handelDelete = (index) => {
    confirm.require({
        message: '是否要删除此纪录',
        header: '删除确认',
        icon: 'pi pi-info-circle',
        rejectClass: 'p-button-text p-button-text',
        acceptClass: 'p-button-danger p-button-text',
        accept: () => {
            console.log(backupHeaders.value[index]);
            // 使用splice方法从数组中删除该元素
            backupHeaders.value.splice(index, 1);

            toast.add({ severity: 'info', summary: '证实', detail: '部件已删除', life: 3000 });
        },
        reject: () => {
            toast.add({ severity: 'error', summary: '拒绝', detail: '您已拒绝', life: 3000 });
        }
    });
};
const cards = ref();
// 新增小部件
const addTitle = ref();
const addPartVisible = ref(false);
const addPart = () => {
    addPartVisible.value = true;
};
// 新增小部件确认
const addconfirmClick = () => {
    backupHeaders.value.push({ name: addTitle.value, code: addTitle.value });
    addPartVisible.value = false;
};
// 重置仪表盘

// 重置数组
const resetArray = () => {
    console.log(backupHeaders.value);
    console.log(partHeaders);
    backupHeaders.value.length = 0; // 清空原数组
    backupHeaders.value = partHeaders; // 将备份数组的元素重新添加到原数组中
    console.log(partHeaders);
};
// function resetArray() {
//     backupHeaders.value.length = 0; // 清空原数组
//     backupHeaders.value.push(...partHeaders); // 将备份数组的元素重新添加到原数组中
// }
</script>

<template>
    <Toast />
    <ConfirmDialog></ConfirmDialog>
    <!-- 工具栏 -->
    <Toolbar>
        <template #end>
            <Button icon="pi pi-plus" class="mr-2" text v-tooltip.bottom="{ value: '添加新部件', autoHide: true }" @click="addPart" />
            <Button icon="pi pi-history" class="mr-2" text v-tooltip.bottom="{ value: '重置仪表盘：回到历史最初', autoHide: true }" @click="resetArray" />
            <Button icon="pi pi-refresh" class="mr-2" text v-tooltip.bottom="{ value: '更新仪表盘：保存此仪表盘', autoHide: true }" @click="resetArray" />
            <Button icon="pi pi-wrench" text v-tooltip.bottom="{ value: '编辑仪表盘', autoHide: true }" />
        </template>
    </Toolbar>
    <!-- 小部件-card -->
    <div class="card" style="overflow: auto; max-height: 400px">
        <div style="display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr)">
            <Card v-for="(p, index) in backupHeaders" :key="index" class="chart-card" v-model="cards">
                <template #title>
                    <div class="card-title">
                        <span> {{ p.name }}</span>
                        <div class="btns">
                            <Button icon="pi pi-cog" text v-tooltip.bottom="{ value: '图表设置', autoHide: true }" @click="handelSetChartType(index)" />
                            <Button icon="pi pi-trash" text v-tooltip.bottom="{ value: '删除', autoHide: true }" @click="handelDelete(index)" />
                            <Button icon="pi pi-window-maximize" @click="fullScreenVisible = true" text v-tooltip.bottom="{ value: '全屏', autoHide: true }" />
                        </div>
                    </div>
                </template>

                <template #content>
                    <div class="flex justify-content-center">
                        <Chart :type="chartType" :data="chartData" :options="chartOptions" class="w-full md:w-20rem" />
                        <!-- 全屏 -->
                        <Sidebar v-model:visible="fullScreenVisible" position="full">
                            <Chart :type="chartType" :data="chartData" :options="chartOptions" style="width: 50%; margin-left: 25%; height: 100%; display: flex; justify-content: center; align-items: center" />
                        </Sidebar>
                    </div>
                </template>
            </Card>
        </div>
    </div>
    <!-- 弹框--设置图表类型 -->
    <Dialog v-model:visible="chartTypeVisible" modal>
        <template #header>
            <div class="inline-flex align-items-center justify-content-center gap-2">
                <span class="font-bold white-space-nowrap">图表设置</span>
            </div>
        </template>
        <!-- 选择列表 -->
        <span class="p-float-label">
            <Dropdown v-model="selectedType" :options="types" optionLabel="name" placeholder="选择图表类型" class="w-full md:w-14rem" />
        </span>
        <template #footer>
            <Button label="Ok" icon="pi pi-check" @click="confirmClick(index)" autofocus />
        </template>
    </Dialog>
    <!-- 弹框--新增小部件 -->
    <Dialog v-model:visible="addPartVisible">
        <template #header>
            <div class="inline-flex align-items-center justify-content-center gap-2">
                <span class="font-bold white-space-nowrap">添加小部件</span>
            </div>
        </template>
        <!-- 选择列表 -->
        <div class="flex flex-column gap-2">
            <label for="username">小部件标题</label>
            <InputText v-model="addTitle" />
        </div>
        <template #footer> <Button label="Ok" icon="pi pi-check" @click="addconfirmClick" autofocus /> </template
    ></Dialog>
</template>
<style scoped lang="scss">
.p-tabview {
    :deep(.p-tabview-nav) {
        justify-content: space-evenly;
    }
}
.chart-card {
    .btns {
        display: none;
    }

    :hover {
        .btns {
            display: block;
        }
    }
}
.card-title {
    height: 20px;
    display: flex;
    justify-content: space-between;
}
</style>
